<template>
  <div class="egit_box" style="margin-top:15px" >
    <el-form label-width="80px" :model="sysMeassage" ref="sysMeassage">
      <el-form-item
        label="标题"
        prop="title"
        :rules="[{ required: true, message: '标题不能为空' }]"
      >
        <el-input v-model="sysMeassage.title"> </el-input>
      </el-form-item>
      <el-form-item
        label="发布内容"
        style="margin-top:15px;"
        prop="initContent"
        :rules="[{ required: true, message: '内容不能为空' }]"
      >
        <div class="text_box" style="width: 100%">
          <vue-egdit
            ref="editor"
            id="editor"
            v-model="sysMeassage.initContent"
            :menus="meaus"
          ></vue-egdit>
        </div>
        <div class="btn"></div>
      </el-form-item>
      <div class="btn-style">
        <el-button type="primary" @click="sendMessage">提交</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
//参考文档 https://www.npmjs.com/package/vue-wangeditor
import vueEgdit from "vue-wangeditor";
import sysMessageApi from "@/api/sysMessage";
export default {
  components: {
    vueEgdit,
  },
  data() {
    return {
      btnDisabled: false,
      sysMeassage: {
        title: "感谢您的支持",
        initContent: "感谢您支持该平台！如果喜欢请分享给您的好友哦！",
      },

      meaus: [
        "source", // 源码模式
        "|",
        "bold", // 粗体
        "underline", // 下划线
        "italic", // 斜体
        "strikethrough", // 中线
        "eraser", // 清空格式
        "forecolor", // 文字颜色
        "bgcolor", // 背景颜色
        "|",
        "quote", // 引用
        "fontfamily", // 字体
        "fontsize", // 字号
        "head", // 标题
        "unorderlist", // 无序列表
        "orderlist", // 有序列表
        "alignleft", // 左对齐
        "aligncenter", // 居中
        "alignright", // 右对齐
        "|",
        "link", // 链接
        "unlink", // 取消链接
        "table", // 表格
        "emotion", // 表情
        "|",
        "img", // 图片
        // "video", // 视频
        "insertcode", // 插入代码
        "|",
        "undo", // 撤销
        "redo", // 重做
        "fullscreen", // 全屏
      ],
    };
  },

  created() {
    // console.log(this.$refs.editor, "富文本实例");
    // this.sysMeassage.initContent = this.$refs.editor.getHtml(this.sysMeassage.initContent);
    // this.sysMeassage.initContent = '感谢您支持该平台！如果喜欢请分享给您的好友哦！';
  },
  methods: {
    sendMessage() {
      this.sysMeassage.initContent = this.$refs.editor.getText(
        this.sysMeassage.initContent
      );
      this.$refs.sysMeassage.validate((flag, obj) => {
        if (!flag) {
          return;
        }
        this.sysMeassage.initContent = this.$refs.editor.getHtml(
          this.sysMeassage.initContent
        );
        sysMessageApi.acceptStatistics(this.sysMeassage).then((response) => {
          if (response) {
            this.$confirm("此操作将发送系统消息, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.$message({
                  type: "success",
                  message: "发送成功!",
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消操作",
                });
              });
          }
        });
      });
    },
    reset() {
      this.sysMeassage.title = "";
      this.sysMeassage.initContent = this.$refs.editor.clear();
    },
    getContent() {
      // this.sysMeassage.initContent = this.$refs.editor.getHtml(this.sysMeassage.initContent);
      //   console.log(this.sysMeassage.initContent, "获取编辑器当前内容的html代码片段");
    },
  },
};
</script>
<style>
.btn-style {
  margin-top: 40px;
  margin-left: 35px;
  display: flex;
  justify-content: space-around;
  width: 300px;
}
</style>
